<template>
  <div class="gauge-chart">
    <e-charts class="chart"  :options="options"/>
  </div>
</template>

<script type="text/javascript">
import ECharts from '@/components/Echarts'
import * as echarts from 'echarts/core'
import { GaugeChart } from 'echarts/charts'
echarts.use([
  GaugeChart
])
export default {
  name: 'GaugeChart2',
  components: {
    ECharts
  },
  props: {
    data: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      options: null
    }
  },
  mounted () {
    this.renderChart()
  },
  methods: {
    renderChart () {
      this.options = {
        series: [
          {
            name: 'Indicator',
            type: 'gauge',
            startAngle: 0, // 扇形开始的角度
            endAngle: 360, // 扇形结束的角度
            detail: {
              formatter: '{a|{value}}{b|%}',
              rich: {
                a: {
                  color: '#666',
                  verticalAlign: 'bottom',
                  fontSize: 14,
                  fontFamily: 'YouSheBiaoTiHei',
                  textShadowColor: 'rgba(54, 255, 242, 0.36)',
                  textShadowBlur: 4,
                  textShadowOffsetX: 1,
                  textShadowOffsetY: 1
                },
                b: {
                  color: '#666',
                  verticalAlign: 'bottom',
                  padding: [0, 0, 0, 2],
                  textShadowColor: 'rgba(54, 255, 242, 0.36)',
                  textShadowBlur: 4,
                  textShadowOffsetX: 1,
                  textShadowOffsetY: 1
                }
              },
              show: true,
              color: '#fff',
              offsetCenter: ['0', '-5%'],
              fontSize: 14,
              fontFamily: 'YouSheBiaoTiHei'
            },
            data: [
              {
                value: this.data.ratio, // 中间的值
                name: this.data.label
              }
            ],
            radius: '90%', // 扇形的大小100%为最大
            axisLine: {
              show: true,
              lineStyle: {
                width: 15 // 这个是修改宽度的属性
                // color: [[1, '#173449']]
              }
            },
            progress: {
              show: true,
              width: 15,
              overlap: false,
              itemStyle: {
                color: '#409eff'
              }
            },
            splitLine: {
              show: false,
              length: 0
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            pointer: {
              show: false
            },
            title: {
              show: false,
              offsetCenter: ['0', '71%'],
              color: '#fff',
              fontSize: 12,
              fontFamily: 'Source Han Sans CN-Normal'
            }
          }
        ]
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
